<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 操作类型选项
const operationOptions = [
	{
		label: '全部操作',
		value: ''
	},
	{
		label: '审核通过',
		value: 'approve'
	},
	{
		label: '提交申请',
		value: 'submit'
	},
	{
		label: '材料补充',
		value: 'supplement'
	},
	{
		label: '材料驳回',
		value: 'reject'
	}
]

// 筛选表单
const filterForm = ref({
	operation: '',
	date: ''
})

// 日志数据
const logList = ref([
	{
		id: 1,
		operator: '管理员A',
		operationType: 'approve',
		description: '运动员张三的注册申请',
		time: '2024-01-15 11:20'
	},
	{
		id: 2,
		operator: '系统',
		operationType: 'submit',
		description: '运动员张三提交涉项目注册',
		time: '2024-01-15 11:20'
	},
	{
		id: 3,
		operator: '系统',
		operationType: 'supplement',
		description: '运动员王五上传新的证明材料',
		time: '2024-01-15 11:20'
	},
	{
		id: 4,
		operator: '管理员A',
		operationType: 'reject',
		description: '运动员赵六的申请材料不完整',
		time: '2024-01-15 11:20'
	},
	{
		id: 5,
		operator: '管理员A',
		operationType: 'approve',
		description: '运动员张三的注册申请',
		time: '2024-01-15 11:20'
	},
	{
		id: 6,
		operator: '管理员A',
		operationType: 'approve',
		description: '运动员张三的注册申请',
		time: '2024-01-15 11:20'
	}
])

const getOperationTypeLabel = (type: string) => {
	const labels: Record<string, string> = {
		approve: '审核通过',
		submit: '提交申请',
		supplement: '材料补充',
		reject: '材料驳回'
	}
	return labels[type] || type
}

const getOperationTypeColor = (type: string) => {
	const colors: Record<string, string> = {
		approve: 'bg-[#00B42A]/10 text-success',
		submit: 'bg-[#2668ff]/10 text-brand',
		supplement: 'bg-[#14C9C9]/10 text-cyan',
		reject: 'bg-[#F53F3F]/10 text-danger'
	}
	return colors[type] || ''
}

const handleSearch = () => {
	ElMessage.info('搜索日志')
}

const handleReset = () => {
	filterForm.value = {
		operation: '',
		date: ''
	}
}
</script>

<template>
	<div class="flex-1 flex flex-col min-h-0 p-5">
		<!-- 筛选表单 -->
		<div class="text-base font-500 text-primary mb-4.5">操作日志</div>
		<div class="flex items-center gap-2.5 mb-4.5 w-[450px]">
			<el-select
				v-model="filterForm.operation"
				placeholder="全部操作"
				class="flex-1"
				clearable
			>
				<el-option
					v-for="item in operationOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-date-picker
				v-model="filterForm.date"
				type="date"
				placeholder="选择日期"
				clearable
				class="flex-1"
			/>
		</div>

		<!-- 日志列表 -->
		<div class="flex-1 overflow-auto gap-4 p-4 border border-background-tertiary rounded">
			<div
				v-for="log in logList"
				:key="log.id"
				class="border-b border-[#DCDFE6] last:border-b-0 py-4 first:pt-0 last:pb-0"
			>
				<div class="flex items-center gap-1 mb-1">
					<div
						class="size-[7px] rounded-full"
						:class="log.operator === '系统' ? 'bg-brand' : 'bg-success'"
					/>
					<span class="text-sm text-primary">{{ log.operator }}</span>
					<span :class="['table-tag h-[22px]', getOperationTypeColor(log.operationType)]">
						{{ getOperationTypeLabel(log.operationType) }}
					</span>
					<span class="text-xs text-secondary ml-auto">{{ log.time }}</span>
				</div>

				<div class="text-xs text-tertiary">
					{{ log.description }}
				</div>
			</div>
		</div>
	</div>
</template>
